<template>
  <div class="app-container">
    <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
      :model="formData" :rules="rules" size="medium" label-width="140px">
      <h2 style="text-align: center">设备情况登记</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="设备名称" prop="deviceName">
            <el-input disabled v-model="formData.deviceName" placeholder="请输入设备名称" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="制造厂商" prop="manufacturer">
            <el-select disabled v-model="formData.manufacturer" placeholder="请选择制造厂商" clearable
              :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.sys_manufacturer_list" :key="dict.value" :label="dict.label"
                :value="dict.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出厂日期" prop="factoryDate">
            <el-date-picker disabled v-model="formData.factoryDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择出厂日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商" prop="supplierId">
            <el-select disabled v-model="formData.supplierId" placeholder="请选择供应商" clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in supplierIdOptions" :key="index" :label="item.supplierName"
                :value="item.supplierBaseId" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系方式" prop="phone">
            <el-input disabled v-model="formData.phone" placeholder="请输入联系方式" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备用途" prop="useInfo">
            <el-input disabled v-model="formData.useInfo" placeholder="请输入设备用途" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备编号" prop="deviceCode">
            <el-input :disabled="!$route.query.isReg" v-model="formData.deviceCode" placeholder="请输入设备编号" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="涉及领域" prop="concernFieldValue">
            <el-select
              v-model="formData.concernFieldValue"
              placeholder="请选择涉及领域"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_device_area"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="涉及项目" prop="concernProject">
            <el-input
              v-model="formData.concernProject"
              placeholder="请输入涉及项目"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="规格型号" prop="spec">
            <el-input v-model="formData.spec" placeholder="请输入规格型号" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出厂编号" prop="code">
            <el-input v-model="formData.code" placeholder="请输入出厂编号" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="移交附件" prop="turnAttachment">
            <el-input v-model="formData.turnAttachment" placeholder="请输入移交附件" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="位置" prop="site">
            <el-select filterable v-model="formData.site" placeholder="请选择位置" clearable :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.sys_site_list" :key="dict.value" :label="dict.label"
                :value="dict.label" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="精度" prop="scale">
            <el-input v-model="formData.scale" placeholder="请输入精度" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="操作规程" prop="operStandard">
            <el-radio-group v-model="formData.operStandard" size="medium">
              <el-radio v-for="(item, index) in operStandardOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="15">
        <el-col :span="8" v-if="formData.operStandard == 0">
          <el-form-item label="操作规程受控编号" prop="standardCode">
            <el-input v-model="formData.standardCode" placeholder="请输入操作规程受控编号" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="操作视频" prop="isVideo">
            <el-radio-group v-model="formData.isVideo" size="medium">
              <el-radio v-for="(item, index) in isVideoOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="校准/计量检定周期" prop="checkPeriod">
            <el-input v-model="formData.checkPeriod" placeholder="请输入校准/计量检定周期" clearable :style="{ width: '100%' }">
              <template slot="append">个月</template>
            </el-input>
            <!-- <el-date-picker
              type="month"
              v-model="formData.checkPeriod"
              format="yyyy-MM"
              value-format="yyyy-MM"
              :style="{ width: '100%' }"
              placeholder="请选择校准/计量检定周期"
              clearable
            ></el-date-picker>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="15">
        <el-col :span="8">
          <el-form-item label="维护保养内容" prop="careContent">
            <el-input v-model="formData.careContent" placeholder="请输入维护保养内容" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护保养周期" prop="carePeriod">
            <el-input v-model="formData.carePeriod" placeholder="请输入维护保养周期" clearable :style="{ width: '100%' }">
              <template slot="append">个月</template>
            </el-input>
            <!-- <el-date-picker
              type="month"
              v-model="formData.carePeriod"
              format="yyyy-MM"
              value-format="yyyy-MM"
              :style="{ width: '100%' }"
              placeholder="请选择维护保养周期"
              clearable
            ></el-date-picker>-->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="溯源方式" prop="traceMethod">
            <el-select v-model="formData.traceMethod" placeholder="请选择溯源方式" clearable :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.sys_trace_method" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
            <!-- <el-input
              v-model="formData.traceMethod"
              placeholder="请输入溯源方式"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>-->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="测量范围" prop="checkScope">
            <el-input v-model="formData.checkScope" placeholder="请输入测量范围" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="扩展不确定度/最大允差/准确度等级" prop="checkLevel">
            <el-input v-model="formData.checkLevel" placeholder="请输入扩展不确定度/最大允差/准确度等级" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分度值" prop="scaleValue">
            <el-input v-model="formData.scaleValue" placeholder="请输入分度值" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="15">
        <el-col :span="8">
          <el-form-item label="管理人" prop="managerUserId">
            <UserDialog @change="changeManger" placeholder="请选择管理人" v-model="formData.managerUserId"></UserDialog>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门" prop="deptId">
            <el-cascader :props="{ value: 'id', checkStrictly: true }" :show-all-levels="false" ref="reference"
              placeholder="请选择检验部门" :style="{ width: '100%' }" v-model="formData.deptId"
              :options="deptOptions"></el-cascader>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="检定方式" prop="checkType">
            <el-radio-group v-model="formData.checkType" size="medium">
              <el-radio v-for="(item, index) in checkTypeOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="期间核查" prop="checkType">
            <el-radio-group v-model="formData.checkType" size="medium">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
          <el-col :span="8" >
          <el-form-item label="核查周期" prop="checkPeriod">
            <el-input
              v-model="formData.checkPeriod"
              placeholder="请输入核查周期"
              clearable
              :style="{ width: '100%' }"
            >
              <template slot="append">个月</template>
            </el-input>
          </el-form-item>
        </el-col>
         <el-col :span="8">
          <el-form-item label="期间核查方式" prop="site">
            <el-select
              v-model="formData.site"
              placeholder="请选择期间核查方式"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_site_list"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>-->
      </el-row>
      <el-row gutter="15">
        <el-col :span="8">
          <el-form-item label="设备图片" prop="image">
            <imageUpload :limit="1" :disabled="$route.query.isInfo || isInfo"
              :fileType="['png', 'jpg', 'jpeg', 'PDF', 'pdf']" v-model="formData.image" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="操作视频" prop="videoUrl" v-if="formData.isVideo == 0">
            <VideoUpload fileSize="50" :limit="1" :disabled="$route.query.isInfo" :fileType="['mp3', 'mp4']"
              v-model="formData.videoUrl" />
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4">允许操作人</h4>

      <el-form-item label="允许操作人" prop="operUserId">
        <UserDialogSelection :pageSizes="[200]" @change="changeOpen" placeholder="请选择允许操作人" v-model="formData.operUserId">
        </UserDialogSelection>
      </el-form-item>
      <h4 class="form-header h4">附件信息（移交附件、期间核查作业指导书）</h4>
      <el-form-item label prop="oss">
        <FileUploadBase :isDelete="!($route.query.isInfo || isInfo)" v-model="formData.oss"></FileUploadBase>
      </el-form-item>
      <el-col :span="24" v-if="btnShow">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user.js";
import { selectList } from "@/api/supplier/SupplierBase.js";
import { deviceAdd, updategdevice, deviceInfo, updateByBodevice } from "@/api/device/device.js";
export default {
  components: {},
  dicts: [
    "sys_manufacturer_list",
    "sys_trace_method",
    "sys_site_list",
    "sys_device_area"
  ],
  props: {
    isInfo: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ""
    },
    btnShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formData: {
        operUsers: [],
        turnAttachment: undefined,
        deviceCode: undefined,
        deviceName: undefined,
        spec: undefined,
        code: undefined,
        manufacturer: undefined,
        factoryDate: null,
        supplierId: undefined,
        phone: undefined,
        useInfo: undefined,
        operUserId: [],
        managerUserId: undefined,
        operStandard: "0",
        standardCode: undefined,
        isVideo: "0",
        checkPeriod: undefined,
        careContent: undefined,
        carePeriod: undefined,
        traceMethod: undefined,
        checkScope: undefined,
        checkLevel: undefined,
        scaleValue: undefined,
        scale: undefined,
        deptId: undefined,
        site: undefined,
        checkType: "0",
        videoUrl: undefined,
        image: undefined,
        oss: undefined
      },
      rules: {
        turnAttachment: [
          {
            required: true,
            message: "移交附件不能为空",
            trigger: "blur"
          }
        ],
        image: [
          {
            required: true,
            message: "设备图片不能为空",
            trigger: "blur"
          }
        ],
        videoUrl: [
          {
            required: true,
            message: "操作视频不能为空",
            trigger: "blur"
          }
        ],
        // concernProject: [
        //   {
        //     required: true,
        //     message: "请输入设备编号",
        //     trigger: "blur"
        //   }
        // ],
        deviceCode: [
          {
            required: true,
            message: "请输入设备编号",
            trigger: "blur"
          }
        ],
        deviceName: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: "blur"
          }
        ],
        spec: [
          {
            required: true,
            message: "请输入规格型号",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入出厂编号",
            trigger: "blur"
          }
        ],
        manufacturer: [
          {
            required: true,
            message: "请选择制造厂商",
            trigger: "change"
          }
        ],
        factoryDate: [
          {
            required: false,
            message: "请选择出厂日期",
            trigger: "change"
          }
        ],
        supplierId: [
          {
            required: true,
            message: "请选择供应商",
            trigger: "change"
          }
        ],
        // concernFieldValue: [
        //   {
        //     required: true,
        //     message: "请选择涉及领域",
        //     trigger: "change"
        //   }
        // ],
        phone: [
          {
            required: false,
            message: "请输入联系方式",
            trigger: "blur"
          }
        ],
        useInfo: [
          {
            required: true,
            message: "请输入设备用途",
            trigger: "blur"
          }
        ],
        operUserId: [
          {
            required: true,
            message: "请选择允许操作人",
            trigger: "change"
          }
        ],
        managerUserId: [
          {
            required: true,
            message: "请选择管理人",
            trigger: "change"
          }
        ],
        operStandard: [
          {
            required: true,
            message: "操作规程不能为空",
            trigger: "change"
          }
        ],
        standardCode: [
          {
            required: true,
            message: "请输入操作规程受控编号",
            trigger: "blur"
          }
        ],
        isVideo: [
          {
            required: true,
            message: "操作视频不能为空",
            trigger: "change"
          }
        ],
        checkPeriod: [
          {
            required: true,
            message: "请选择校准/计量检定周期",
            trigger: "blur"
          }
        ],
        careContent: [
          {
            required: true,
            message: "请输入维护保养内容",
            trigger: "blur"
          }
        ],
        carePeriod: [
          {
            required: true,
            message: "请选择维护保养周期",
            trigger: "blur"
          }
        ],
        traceMethod: [
          {
            required: true,
            message: "请输入溯源方式",
            trigger: "change"
          }
        ],
        oss: [
          {
            required: false,
            message: "附件不能为空",
            trigger: "change"
          }
        ],
        checkScope: [
          {
            required: true,
            message: "请输入测量范围",
            trigger: "blur"
          }
        ],
        checkLevel: [
          {
            required: true,
            message: "请输入扩展不确定度/最大允差/准确度等级",
            trigger: "blur"
          }
        ],
        scaleValue: [
          {
            required: true,
            message: "请输入分度值",
            trigger: "blur"
          }
        ],
        scale: [
          {
            required: true,
            message: "请输入精度",
            trigger: "blur"
          }
        ],
        deptId: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change"
          }
        ],
        site: [
          {
            required: true,
            message: "请选择位置",
            trigger: "change"
          }
        ],
        checkType: [
          {
            required: true,
            message: "检定方式不能为空",
            trigger: "change"
          }
        ]
      },
      manufacturerOptions: [
        {
          label: "选项一",
          value: 1
        },
        {
          label: "选项二",
          value: 2
        }
      ],
      supplierIdOptions: [
        {
          label: "选项一",
          value: 1
        },
        {
          label: "选项二",
          value: 2
        }
      ],
      operUserIdOptions: [
        {
          label: "选项一",
          value: 1
        },
        {
          label: "选项二",
          value: 2
        }
      ],
      managerUserIdOptions: [
        {
          label: "选项一",
          value: 1
        },
        {
          label: "选项二",
          value: 2
        }
      ],
      operStandardOptions: [
        {
          label: "有",
          value: 0
        },
        {
          label: "无",
          value: 1
        }
      ],
      isVideoOptions: [
        {
          label: "有",
          value: 0
        },
        {
          label: "无",
          value: 1
        }
      ],
      deptIdOptions: [
        {
          label: "选项一",
          value: 1
        },
        {
          label: "选项二",
          value: 2
        }
      ],
      checkTypeOptions: [
        {
          label: "检定/校准",
          value: 0
        },
        {
          label: "准用",
          value: 1
        }
      ],
      deptOptions: [],
      supplierIdOptions: []
    };
  },
  computed: {},
  created() {
    this.selectList();
    this.getDeptTree();
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo || this.$route.query.isReg) {
      this.getinfo();
    }
  },
  mounted() { },
  methods: {
    changeOpen(e) {
      console.log(this.formData.operUserId);
      console.log(e);
      console.log(this.formData.operUsers);
      let arr = []
      e.forEach((item) => {
        console.log(item);
        if (item == undefined) {
          console.log('kkkkkkkkkk');
        } else {
          const obj = {}
          obj.operUserId = item.userId ? item.userId : ''
          obj.operUserName = item.nickName ? item.nickName : ''
          arr.push(obj)
        }

      })
      this.formData.operUsers = arr
      console.log(this.formData.operUsers);
      // this.formData.operUsers = e.map(i => {
      //   return {
      //     operUserId: i ? i.userId : "",
      //     operUserName: i ? i.nickName : ""
      //   };
      // });
    },
    changeManger(e) {
      console.log(e, "111");
      this.formData.managerUserName = e.nickName;
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 查询供应商下拉树结构 */
    selectList() {
      selectList().then(response => {
        this.supplierIdOptions = response.data;
      });
    },
    getinfo() {
      console.log('getinfo');
      deviceInfo(this.$route.query.id || this.id).then(response => {
        this.formData = response.data;
        let arr = []
        this.formData.operUserId = []
        // this.formData.operUserId = this.formData.operUsers.map(
        //   e => e.operUserId
        // );
        this.formData.operUsers.forEach(item => {
          console.log(item);
          arr.push(item.operUserId)
        });
        this.$nextTick(() => {
          this.formData.operUserId.push(...arr)
          this.$forceUpdate()
        });
        // this.formData.operUserId = [{userId:87,nickname:'胡京龙'}]
        console.log(this.formData.operUserId);
        // this.formData.operUserId = this.formData.operUserId.toString()
        // if (this.$route.query.isEdit) {
        //   this.formData.deviceCode = undefined;
        // }
        this.formData.operStandard = this.formData.operStandard
          ? this.formData.operStandard
          : "0";
        this.formData.isVideo = this.formData.isVideo
          ? this.formData.isVideo
          : "0";
        this.formData.checkType = this.formData.checkType
          ? this.formData.checkType
          : "0";
      });
    },
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          let row = this.supplierIdOptions.find(
            i => i.supplierBaseId === this.formData.supplierId
          );
          query.supplierName = row.supplierName;
          query.isAdminOpt = this.$route.query.isAdminOpt ? 1 : undefined;
          // query.concernFieldLabel = this.dict.type.sys_device_area.find(
          //   i => i.value === query.concernFieldValue
          // ).label;
          query.deptId = this.$refs.reference.getCheckedNodes()[0].value;
          query.deptName = this.$refs.reference.getCheckedNodes()[0].label;
          if (this.formData.deviceId != undefined) {
            query.operUserId = query.operUserId.toString()
            if (this.$route.query.isReg) {
              updategdevice(query).then(response => {
                this.$modal.msgSuccess("登记成功");
                this.resetForm();
              });
            } else {
              updateByBodevice(query).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.resetForm();
              });
            }

          } else {
            deviceAdd(query).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    }
  }
};
</script>
